<template>
    <fieldset>
        <legend>tab切换</legend>
        <button v-for="btn in buttons" :key="btn"
        :class="['tab-button',{active:btn===selectBtn}]"
        @click="handleClick(btn)"
        
        >{{btn}}
        </button>
        <div class="tab" :is="change">宇智波佐助</div>
    </fieldset>
</template>

<script>
import emailCom from './email-com';
import mineCom from './mine-com';
import homeCom from './home-com';
    export default{
        data(){
            return{
                buttons:['email','home','mine'],
                selectBtn:'email'               
            }
        },
        components:{
            emailCom,
            homeCom,
            mineCom
        },
        computed:{
            change(){
                return this.selectBtn + "Com"
            }
        },
        methods:{
            handleClick(btn){
                this.selectBtn = btn
            }
        }
    }
</script>

<style scoped>
.tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
}

.tab-button:hover {
    background: #e0e0e0;
}

.tab-button.active {
    background: hotpink;
}

.tab {
    border: 1px solid #ccc;
    padding: 10px;
}

h1 {
    margin: 0;
}
</style>